import React, { useEffect, FC } from "react";
import { inject, observer } from "mobx-react";
import { Layout, Breadcrumb } from "antd";
import MyFoot from "../../components/MyFoot";
import MyHead from "../../components/MyHead";
import SideMenu from "../../components/SideMenu";
import { Outlet } from "react-router-dom";

const { Header, Footer, Sider, Content } = Layout;

const MainIndex: FC<any> = ({ uinfo }) => {
  const { count, userInfo, changeCount, changeInfoAsync } = uinfo;

  useEffect(() => {
    changeInfoAsync();
  }, []);

  return (
    <div className="main" style={{ background: "#f3f3f3" }}>
      <Layout style={{ height: "100%" }}>
        <SideMenu />
        <Layout>
          <MyHead />
          <div style={{ padding: "20px 20px 0 20px" }}>
            <Breadcrumb>
              {/* 动态的面包屑 */}
              <Breadcrumb.Item>Home</Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href="">Application Center</a>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href="">Application List</a>
              </Breadcrumb.Item>
              <Breadcrumb.Item>An Application</Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <Content
            style={{
              width: "100%",
              height: "100%",
              boxSizing: "border-box",
              overflow: "auto",
              paddingLeft: 20,
            }}
          >
            <Outlet />
          </Content>

          <Footer style={{ background: "#b5b5b5", padding: 20 }}>
            <MyFoot />
          </Footer>
        </Layout>
      </Layout>
    </div>
  );
};

export default inject("uinfo")(observer(MainIndex));
